<template>
  <div class="category">
    <!-- <div class="search">
      <el-form ref="searchForm" v-loading="listLoading" :model="searchForm" inline>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model.trim="searchForm.nickName" placeholder="用户昵称" class="input" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="medium" @click="searchData">
            搜索
          </el-button>
          <el-button type="primary" size="medium" @click="resetSearchData">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div> -->

    <div class="app-container">
      <el-table v-loading="listLoading"
        :data="list.slice((searchForm.page - 1) * searchForm.pageSize, searchForm.page * searchForm.pageSize)"
        element-loading-text="Loading" border fit highlight-current-row>

        <el-table-column label="所属游戏" align="center">
          <template slot-scope="scope">
            {{ findGame(scope.row.gameId).gameName }}
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.idleName }}
          </template>
        </el-table-column>
        <el-table-column label="结算周期" align="center">
          <template slot-scope="scope">
            {{ scope.row.day + '天' }}
          </template>
        </el-table-column>
        <el-table-column label="商品金额" align="center">
          <template slot-scope="scope">
            {{ '￥' + scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column label="商品状态" align="center">
          <template slot-scope="scope">
            <el-switch style="display: block" v-model="scope.row.status" @change="updateIdle(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background :current-page.sync="searchForm.page" layout="total, prev, pager, next"
          :total="list.length" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from '@/plugins/utils/timeUtils'

import gameApi from '@/plugins/api/game'
import idleApi from '@/plugins/api/idle'

export default {
  name: 'UserList',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success'
      }
      return statusMap[status]
    },
    statusFilterText(status) {
      const statusMap = {
        0: '禁用',
        1: '正常'
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      count: 0,
      searchForm: {
        page: 1,
        pageSize: 10
      },
      gameOptions: []
    }
  },
  mounted() {
    this.fetchData()
    this.getGameList()
  },
  methods: {
    async getGameList() {
      const res = await gameApi.list()
      console.log('res -> ', res);
      if (res.code === 200) {
        this.gameOptions = res.data
      } else {
        this.$message.error('获取游戏列表出错')
      }
    },
    findGame(id) {
      return this.gameOptions.find(item => item.id === id)
    },
    async updateIdle(row) {
      console.log(row);
      row.createTime = new Date().getTime()
      const res = await idleApi.add(row)
      if (res.code === 200) {
        this.fetchData()
      }else {
        this.$message.error(res.msg)
      }
    },
    // 获取用户信息
    async fetchData() {
      try {
        this.listLoading = true
        const res = await idleApi.list()
        console.log('res -> ', res);
        this.list = res.data
        // this.count = res.data.total
        // this.searchForm.page = res.data.page
        // this.searchForm.pageSize = res.data.pageSize
      } catch (err) {
        console.log(err)
      } finally {
        this.listLoading = false
      }
    },

    formatDate(timestamp) {
      return formatTime(timestamp)
    },
    // 跳转编辑
    handleEdit(row) {
      localStorage.setItem('idle', JSON.stringify(row))
      this.$router.push('/idle/edit')
    },
    // 删除用户
    handleDelete(id) {
      try {
        this.$msgbox
          .confirm('确定需要删除这个用户吗', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
          })
          .then(async () => {
            const r = await deleteUser({ id })
            this.$message.success(r.msg)
            await this.fetchData()
          })
      } catch (err) {
        this.$message.error(err)
      }
    },
    // 搜索
    searchData() {
      this.searchForm.page = 1
      this.searchForm.role = 3
      this.fetchData()
    },
    // 点击页面
    handleCurrentChange(page) {
      this.searchForm.page = page
      this.fetchData()
    },
    // 重置表单
    resetSearchData() {
      this.$refs['searchForm'].resetFields()
      this.fetchData()
    }
  }
}
</script>

<style scoped lang="scss">
.category {
  box-sizing: border-box;
  margin: 24px;
}

.search {
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
</style>
